<template>
  <div class="third-party-container">
    <el-row>
      <el-form ref="form"
               :model="requestParam"
               label-width="100px">
        <el-col :span="6">
          <el-form-item label="应用名称">
            <el-input v-model="requestParam.app_name"
                      placeholder="请输入应用名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6"
                class="flex-end"
                :offset="12">
          <el-button @click="search"
                     type="primary">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-form>

    </el-row>
    <el-table :highlight-current-row="true"
              height="500"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="thirdPartyList.list">
      <el-table-column type="index"
                       width="60"
                       label="序号">
      </el-table-column>
      <el-table-column prop="app_name"
                       label="系统名称">
      </el-table-column>
      <el-table-column prop="app_des"
                       label="系统描述">
      </el-table-column>
      <el-table-column prop="app_no"
                       label="系统编号">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="login(scope.row)">登录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.per_page"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="thirdPartyList.total_count"
                   align="center">
    </el-pagination>
    <el-dialog title="绑定账号"
               :visible.sync="dialogVisible">
      <el-form ref="form"
               :model="bindSystem.data"
               :rules="formRules"
               label-width="100px">
        <el-form-item label="账号"
                      prop="user_no">
          <el-input v-model="bindSystem.data.user_no"
                    placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input v-model="bindSystem.data.password"
                    placeholder="请输入密码"
                    type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary"
                   @click="bindSystemConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { checkItemConfigApi } from '@/services/SystemSetting'

export default {

  data () {
    return {
      dialogVisible: false,
      requestParam: {
        app_name: '',
        page: 1,
        per_page: 10,
        app_endpoint: '1'
      },
      resetParam: {
        app_name: '',
        page: 1,
        per_page: 10,
      },
      thirdPartyList: {
        list: [],
        page: 1,
        total_count: 0
      },
      userInfo: {},
      choosedSystem: {},
      bindSystem: {
        app_sys_no: '',
        user_id: '',
        data: {
          user_no: '',
          password: ''
        }
      },
      formRules: {
        user_no: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handlePageChange (page) {
      this.requestParam.page = page
      this.getAppList()
    },
    search () {
      this.requestParam.page = 1
      this.getAppList()
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getAppList()
    },
    bindSystemConfirm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          checkItemConfigApi.bindSystem({
            data: this.bindSystem
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('绑定成功')
              window.open(this.choosedSystem.app_url + '?access_token=' + res.data.access_token)
            }
          })
        }
      })
    },
    login (row) {
      this.choosedSystem = row
      checkItemConfigApi.checkSystemBind({
        data: {
          app_sys_no: row.app_no,
          user_id: this.userInfo.user_id
        }
      }).then(res => {
        if (res.code === 0) {
          window.open(this.choosedSystem.app_url + '?access_token=' + res.data.access_token)
        } else if (res.code === 33199) {
          this.$message.warning('未绑定系统，请先绑定')
          this.bindSystem = {
            app_sys_no: row.app_no,
            user_id: this.userInfo.user_id,
            data: {
              user_no: '',
              password: ''
            }
          }
          this.dialogVisible = true
        }
      })
    },
    getAppList () {
      checkItemConfigApi.getAppList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.thirdPartyList = res.data
        }
      })
    }
  },
  created () {
    let userInfo = window.localStorage.getItem('userInfo') || '{}'
    this.userInfo = JSON.parse(userInfo)
    this.getAppList()
  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
.third-party-container {
  padding: 20px;
  .el-pagination {
    margin-top: 20px;
  }
}
</style>
